<template>
  <h1>2019 GDP Top 5</h1>
  <div class="container">
    <!-- bar1 -->
    <Bar1 :gdp="gdp" />
    <!-- bar2 -->
    <Bar2 :gdp="gdp" />
  </div>
  <div class="controls">
    <div class="item" v-for="item in gdp" :key="item.country">
      <label>{{ item.country }}</label>
      <input v-model="item.value" type="number" step="0.001" min="0" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Bar1 from "./components/Bar1/index.vue";
import Bar2 from "./components/Bar2/index.vue";
import useFetchIGdp from "./composition/useFetchIGdp";

const { gdp } = useFetchIGdp();
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.controls {
  margin: 1em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.item {
  margin: 1em;
}
.item label {
  margin: 0 1em;
}
.item input {
  height: 26px;
  font-size: 14px;
}
h1 {
  text-align: center;
}
</style>
